<template>
  <div>
    <el-drawer
      direction="rtl"
      :visible.sync="referVisibility"
      size="36%"
      append-to-body
    >
      <el-form
        ref="queryCondition"
        class="queryCondition"
        :model="queryCondition"
      >
        <el-row>
          <el-col :span="8" :offset="2">
            <el-form-item prop="descriptionSml" label="名称">
              <el-input v-model="queryCondition.descriptionSml"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item prop="codeStart" label="编号">
              <el-input v-model.trim="queryCondition.codeStart"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryByCondition(1)"
              >查询
            </el-button>

            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="() => $refs.queryCondition.resetFields()"
            >
            </el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="results"
        ref="supportTable"
        class="supportTable"
        height="360px"
        stripe
        @selection-change="(rows) => (supported = rows)"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="materialCode" label="ID/Code"></el-table-column>
        <el-table-column prop="description" label="物品名称"></el-table-column>
        <el-table-column width="180px" fixed="left">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              @click="openById(row.materialCode)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button type="success" @click="supportDetails">批量添加</el-button>
    </el-drawer>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *  {
  "codeStart": "",
  "descriptionSml": "",
  "pageNum": 1,
  "pageSize": 2
    }
    qc 
 * {
  "total": 3,
  "results": [
    {
      "materialCode": "MM001001060089",
      "description": "万向轮",
      "barCode": "112255",
      "specification": "半径20cm重量2.5kg",
      "referPrice": 125.5,
      "chargeUnit": "个",
      "producingArea": "Zhejiang",
      "abandoned": false
    }
  ]
}
 */
// import New from './components/New.vue';
export default {
  name: "OutStockReferMaterial",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      referVisibility: false,
      queryCondition: {
        codeStart: null,
        descriptionSml: null,
        pageNum: 1,
        pageSize: 8,
      },
      total: 0,
      results: [],
      supported: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    appear() {
      this.queryByCondition();
      this.referVisibility = !this.referVisibility;
    },
    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      this.$http({
        method: "post",
        url: "http://localhost:9096/bmeans/material/query",
        data: this.queryCondition,
      }).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query error: " + error.response.status);
        }
      );
    },
    supportDetails() {
      // this.selected
      //  1先验证是否选择正确或有意义有内容
      if (!this.supported || this.supported.length === 0) {
        this.$message.info("没有选中任何添加项目");
        return;
      }
      //  2核心变量容器变化
      this.$emit("post-supported", this.supported);

      //  3关闭页面出现视觉动画
      this.referVisibility = false;
      this.$refs.supportTable.clearSelection();
    },
  },

  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
